<template>

    <h1>登录</h1>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
        class="demo-ruleForm">
        <el-form-item 
            v-for="(item, index) in dataTabel" 
            v-key="index" :label="item.name + ':'" 
            :prop="item.value" 
            autocomplete="off" 
            :rules="rules[item.value]">
            <el-input 
                v-model="ruleForm[item.value]" 
                :type="item.type" 
                show-word-limit 
                maxlength="11"
                :placeholder="item.name"/>
            <img :src="captchaImageUrl" v-show="item.isCapt" alt="验证码" class="captcha" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 80%;margin: auto;">
                登录
            </el-button>
        </el-form-item>
        <el-form-item>
            <div class="regist">
                <p @click="router.push('/forget')">忘记密码</p>
                <p @click="router.push('/regist')">去注册>></p>
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref, inject } from 'vue';
import router from '@/router/index.js';
import { login } from '@/api/login/index.js';
import { ElMessage } from 'element-plus';
const captchaImageUrl = ref("https://pic4.zhimg.com/v2-17a03b9627aa8f850628c14550a0544a_r.jpg");
const ruleFormRef = ref();
const dataTabel = ref([{
    name: '手机号',
    type: 'number',
    isCapt: false,
    value: "phone"
}, {
    name: '密码',
    type: 'password',
    isCapt: false,
    value: "password"
}, {
    name: '验证码',
    type: 'text',
    isCapt: true,
    value: "checkPass"
}]);
const ruleForm = reactive({
    phone: '',
    password: '',
    captcha: '',
    captchaImageUrl: "https://pic4.zhimg.com/v2-17a03b9627aa8f850628c14550a0544a_r.jpg"
})

const checkAge = async (rule, value, callback) => {
    if (!value) {
        return callback(new Error('验证码不能为空'))
    } else if (value.toString().length != 4) {
        return callback(new Error('验证码长度不合法'))
    } else {
        return callback()
    }
}

const validatePass = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('不能为空'))
    } else {
        return callback()
    }
}
const validatePhone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('不能为空'))
    } else if (value.length <= 7) {
        return callback(new Error("账号长度必须大于7"))
    } else {
        return callback()
    }
}
const rules = reactive({
    phone: [{ validator: validatePhone, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    captcha: [{ validator: checkAge, trigger: 'blur' }],
})
const submitForm = async (formEV) => {
    formEV.validate(async (valid, fields) => {
        if (valid) {
            const data = await login(ruleForm.phone, ruleForm.password);
            if (data.code == 500) {
                ElMessage({
                    message: data.msg,
                    type: 'error',
                })
            } else if (data.code == 200) {
                ElMessage({
                    message: data.msg,
                    type: 'success',
                })
                localStorage.setItem("token", data.data);
                router.push("/table");
            }
        }
    })
}

</script>

<style scoped lang="less">
.captcha {
    width: 30%;
    height: 30px;
}
h1 {
        text-align: center;
        margin-bottom: 20px;
    }
.regist {
    width: 100%;
    height: 32px;
    cursor: pointer;
    display: flex;
    color: var(--el-color-primary);
    justify-content: space-between;
}

.el-form-item__content {
    display: flex !important;
}
</style>